<script setup>
import { onMounted, ref } from "vue";
import vueMkHeader from "@/assets/img/LOGO.png";

//example components
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";

//image
import image from "@/assets/img/LOGO.png";

//material components
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import DefaultInfoCard from "@/views/components/DefaultInfoCard.vue";

// material-input
import setMaterialInput from "@/assets/js/material-input";
import axios from "axios";
let name = ref("");
let tel = ref("");
let email = ref("");
let message = ref("");
let fullscreenLoading = ref(false);
onMounted(() => {
  setMaterialInput();
});
function submit() {
  const nameInputElement = document.getElementById("name");
  const nameInputValue = nameInputElement.value;
  const telInputElement = document.getElementById("tel");
  const telInputValue = telInputElement.value;
  const emailInputElement = document.getElementById("email");
  const emailInputValue = emailInputElement.value;
  const messageInputElement = document.getElementById("message");
  const messageInputValue = messageInputElement.value;
  if (nameInputValue == "") {
    alert("The name is blank!!!");
    return false;
  }
  if (telInputValue == "") {
    alert("The tel is blank!!!");
    return false;
  }
  if (emailInputValue == "") {
    alert("The email is blank!!!");
    return false;
  }
  const rg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
  if (rg.test(emailInputValue) == false) {
    alert("The email is wrong!!!");
    return false;
  }
  // if (emailInputValue.indexOf("@") == -1) {
  //     alert("an @ is not in an email !!!");
  //     return false;
  // }

  const re = /^([0-9]{3}-)?[0-9]{3}-[0-9]{4}$/;
  if (re.test(telInputValue) == false) {
    alert("tel number is not match xxx-xxxx or xxx-xxx-xxxx");
    return false;
  }
  const params = {
    name: nameInputValue,
    phone: telInputValue,
    email: emailInputValue,
    message: messageInputValue,
  };
  fullscreenLoading.value = true;

  axios
    .post("https://formspree.io/f/mzbnylje", params)
    .then((response) => {
      // 处理响应数据
      if (response.data.ok) {
        fullscreenLoading.value = false;
        alert("发送成功！");
      }
    })
    .catch((error) => {
      // 处理请求错误
      fullscreenLoading.value = false;
      throw error;
    });
}
</script>
<template>
  <div class="container position-sticky z-index-sticky top-0">
    <div class="row">
      <div class="col-12">
        <DefaultNavbar
          :sticky="true"
          :action="{
            route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
            color: 'bg-gradient-success',
            label: 'Buy Now',
          }"
        />
      </div>
    </div>
  </div>
  <Header>
    <div
      class="page-header header-height"
      :style="`background-image: url(${vueMkHeader})`"
      loading="lazy"
    ></div>
  </Header>
  <section>
    <div class="page-header min-vh-100">
      <div class="container">
        <div class="row mt-5 mb-3">
          <div>
            <h3 data-aos="fade-up">EFANS VOICE CORPORATION</h3>
            <div class="row" data-aos="fade-up">
              <div class="col-md-1">
                <h5>Address:</h5>
              </div>
              <div class="col-md-11">
                <h5>4045 Willow Lake Blvd Memphis, TN 38118 United States</h5>
              </div>
            </div>
            <div class="row" data-aos="fade-up">
              <div class="col-md-1">
                <h5>Email:</h5>
              </div>
              <div class="col-md-11">
                <h5 style="color: red">info@efansvoice.com</h5>
              </div>
            </div>
          </div>

          <div
            class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5"
          >
            <div
              class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent"
            >
              <div
                class="bg-gradient shadow-primary border-radius-lg p-3"
                style="background-color: red"
              >
                <h3 class="text-white text-primary mb-0" data-aos="fade-left">
                  Contact us
                </h3>
              </div>
            </div>
            <div class="card-body">
              <p class="pb-3" data-aos="fade-right">
                Fill in your phone number and E-mail information, we will have
                the idea to get in touch with you in time to solve your problem
                as soon as possible.
              </p>
              <form id="contact-form" method="post" autocomplete="off">
                <div class="card-body p-0 my-3">
                  <div class="row">
                    <div class="col-md-12">
                      <MaterialInput
                        id="name"
                        class="input-group-static mb-4"
                        :value="name.value"
                        type="text"
                        label="Name"
                        placeholder="Name"
                        :isRequired="true"
                      />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <MaterialInput
                        id="email"
                        class="input-group-static mb-4"
                        :value="email.value"
                        type="email"
                        label="Email"
                        placeholder="Email"
                      />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <MaterialInput
                        id="tel"
                        class="input-group-static mb-4"
                        :value="tel.value"
                        type="tel"
                        label="Tel"
                        placeholder="Tel"
                      />
                    </div>
                  </div>
                  <div class="form-group mb-0 mt-md-0 mt-4">
                    <MaterialTextArea
                      id="message"
                      class="input-group-static mb-4"
                      :value="message.value"
                      :rows="6"
                      placeholder="Describe your problem in at least 250 characters"
                      >Content</MaterialTextArea
                    >
                  </div>
                  <div class="row">
                    <div class="col-md-12 text-center">
                      <MaterialButton
                        variant="gradient"
                        style="background-color: red"
                        class="mt-3 mb-0 text-white"
                        @click="submit"
                        >SUBMIT</MaterialButton
                      >
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <DefaultFooter />
</template>
<style scoped>
.header-height {
  min-height: 75vh !important;
}
@media (max-width: 1000px) {
  .header-height {
    min-height: 40vh !important;
  }
}
</style>
